<template>
  <div class="full-scr">
    <div class="form-wrapper">
      <form class="formdeta">
        <div class="form-group">
          <img class="ball-image" :src="BallDeta.image" alt="图片" />
          <div class="form-details">
            <div class="form-h3">
              <h3>
                <b>{{ BallDeta.ballname }}</b>
              </h3>
            </div>
            <div class="zhuangtai">
              状态：<span
                class="inne"
                tabindex="0"
                data-bs-toggle="tooltip"
                title="点我预约"
              >
                <button class="ball-st" @click="handleStatusChange">
                  {{ BallDeta.state }}
                </button>
              </span>
            </div>
            <div class="reservation-length">
              预约时长：
              <button
                class="btn btn-secondary dropdown-toggle"
                type="button"
                id="dropdownMenuButton1"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                {{ BallDeta.balltime }}
              </button>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                <li>
                  <a
                    class="dropdown-item"
                    href="#"
                    @click.prevent="selectDuration('一个小时')"
                    >一个小时</a
                  >
                </li>
                <li>
                  <a
                    class="dropdown-item"
                    href="#"
                    @click.prevent="selectDuration('两个小时')"
                    >两个小时</a
                  >
                </li>
                <li>
                  <a
                    class="dropdown-item"
                    href="#"
                    @click.prevent="selectDuration('全天')"
                    >全天</a
                  >
                </li>
              </ul>
            </div>

            <div class="beizhu">
              备注：<br /><textarea
                class="note-textarea"
                v-model="BallDeta.memo"
              ></textarea>
            </div>
          </div>
        </div>
        <div class="okk">
          <button @click="saveAndGoBack" class="okkkk">ok</button>
        </div>
      </form>
    </div>
  </div>





</template>  
  
<script>
import { http } from "../../utils/http.js";
export default {
  data() {
    return {
      BallDeta: {}, // 初始化为 null 而不是空对象
      ballappt: {},
      keyWord: "",
      // 假设初始状态是可预约
      ballstste: "可预约",
    };
  },
  created() {
    try {
      // 尝试解析路由查询参数
      const ballportsInfo = this.$route.query.ballportsInfo;
      if (ballportsInfo) {
        this.BallDeta = JSON.parse(ballportsInfo);
      }
    } catch (error) {
      console.error("解析路由查询参数时出错:", error);
      // 在这里处理错误，例如通过警告或重定向到另一个页面
    }
    this.BallDeta= JSON.parse(this.$route.query.ballportsInfo);
  },



  methods: {
    selectDuration(duration) {
      this.BallDeta.balltime = duration; // 更新BallDeta.balltime的值
      // 如果需要，可以在这里添加代码来向后端发送请求保存这个值
    },

    handleStatusChange() {
      if (this.BallDeta.state === "可预约") {
        this.BallDeta.state = "已预约"; // 更新状态为已预约
        // 可以在这里添加其他逻辑，比如发送请求到后端更新状态
      } else if (this.BallDeta.ballstate === "已预约") {
        alert("该球桌已被预约"); // 如果已经是已预约状态，则直接弹出提示信息
      }
    },

    
 
  
async saveAndGoBack() {  
      try {  
        // 假设BallDeta包含了所有需要保存的数据  
        await http.post('/updateAddBallAppt', this.BallDeta); // 发送POST请求到后端API  
  
        // 数据保存成功后，回到上一页  
        this.$router.go(-1); // 使用Vue Router的go方法回到上一页  
  
        // 或者，如果你知道要跳转的具体路由，可以直接使用push方法  
        this.$router.push( '/pool'); // 替换'PreviousRouteName'为实际的路由名  
  
      } catch (error) {  
        // 处理保存数据的错误  
        console.error('Error saving data:', error);  
        // 可以选择显示错误消息给用户  
      }  
    },  


 },
};


</script>

<style scoped>
/* 背景图片 */
.full-scr {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url("../../assets/97.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1; /* 确保内容在上面 */
  /* 可能需要额外的样式来确保内容可以显示在上面 */
}

/* 表单 */
.form-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 假设你想要表单在视口中垂直居中 */
}

.formdeta {
  background-color: beige;
  width: 800px;
  height: 500px;
  border: 3px solid red;
  display: flex; /* 确保formdeta是一个flex容器 */
  flex-direction: column; /* 如果你想让表单内容垂直堆叠，保留这一行；否则，可以移除 */
  padding: 10px; /* 添加内边距 */
  border-radius: 10px;
}

.form-group {
  display: flex; /* 确保form-group是一个flex容器 */
  align-items: flex-start; /* 使子元素在交叉轴上对齐到起点 */
  padding: 10px; /* 可选：为form-group添加内边距 */
}

.ball-image {
  width: 380px;
  height: 380px;
  margin-right: 10px; /* 右侧留出空间给.form-details */
  border-radius: 10px;
}

.form-details {
  flex: 1; /* 占据剩余空间 */
  display: flex; /* 如果你想在form-details内部进一步使用flex布局 */
  flex-direction: column; /* 使form-details的子元素垂直堆叠 */
  align-items: flex-start; /* 使form-details的子元素在交叉轴上对齐到起点 */
}

.form-h3 {
  font-size: 30px;
  letter-spacing: 2px;
}

/* 状态盒子样式 */

.zhuangtai {
  /* 这里设置状态文本的样式 */
  font-size: 25px;
  letter-spacing: 2px;
  display: flex; /* 使用flex布局使按钮与文本对齐 */
  align-items: center; /* 垂直居中对齐 */
}

.ball-st {
  /* 这里设置按钮的样式 */
  width: 80px;
  height: 35px;
  background-color: rgb(37, 89, 14); /* 淡黄色背景 */
  color: rgb(194, 179, 179); /* 白色文字 */
  border-radius: 10px; /* 圆角按钮，可以根据需要调整 */
  font-size: 20px; /* 可以根据需要调整按钮内文字的大小 */
  border: none; /* 去除默认的边框 */
  cursor: pointer; /* 鼠标悬停时变为手形图标，表示可点击 */
  margin-left: 10px; /* 与前面的文本保持一定的距离，可以根据需要调整 */
}

/* 预约时长样式 */

.reservation-length {
  display: flex;
  align-items: center; /* 使文字和按钮垂直居中 */
  font-size: 25px; /* 字体大小 */
  letter-spacing: 2px; /* 字间距 */
}

.btn-secondary {
  background-color: rgb(16, 177, 45); /* 按钮颜色为浅灰色 */
  color: black; /* 按钮文字颜色，可根据需要调整 */
  margin-left: 10px; /* 按钮与文字的间距 */
  border-radius: 10px;
  width: 100px;
  height: 35px;
}
.dropdown-item {
  color: black; /* 设置下拉菜单项的文字颜色为黑色 */
  font-size: 16px; /* 设置字体大小为16px */
}

/* 备注：的样式 */
.beizhu {
  font-size: 25px; /* 字体大小28px */
  letter-spacing: 2px; /* 字间距2px */
}

/* 设置文本框的样式 */
.note-textarea {
  width: 320px; /* 文本框宽100px */
  height: 200px; /* 文本框高（不是长）100px */
  font-style: italic; /* 设置为斜体 */
  color: rgb(25, 25, 26);
  background-color: lightblue; /* 淡蓝色背景 */
  font-size: 15px; /* 文本框内字体字号18px */
  letter-spacing: 5px; /* 文本框内字间距5px */
  resize: none; /* 禁止用户调整文本框大小 */
  border: 1px solid #ccc; /* 可选：添加边框以区分文本框边界 */
  padding: 5px; /* 可选：添加内边距使文本不紧贴边框 */
}

/* OK按钮居中 */
.okk {
  display: flex; /* 使用flex布局来居中按钮 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中（如果需要的话） */
  margin-top: 20px; /* 可选：添加一些上边距，使按钮与表单内容之间有一些间隔 */
}

.okkkk {
  /* 移除 float: center（因为 float 没有 center 值），flex 布局已经实现了居中 */
  background-color: rgb(
    179,
    227,
    231
  ); /* 假设你希望按钮是浅灰色，而不是浅蓝色 */
  width: 200px;
  height: 50px;
  font-size: 18px;
  letter-spacing: 5px;
  border-radius: 10px; /* 添加圆角 */
}
</style>